<template>
  <div class="body">
    <van-image
      width="100vw"
      height="100"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
    />

    <div class="hotelname">
      <h2>XXX酒店</h2>
      <p>经济型</p>
      <p style="font-size: 14px">
        2019年装修|<van-icon name="wap-home-o" />餐厅&nbsp;<van-icon
          name="newspaper-o"
        />会议设施&nbsp;<van-icon name="guide-o" /> 接机服务&nbsp;<van-icon
          name="manager-o"
        />24小时前台
      </p>
    </div>
    <van-sticky>
      <div class="appoint">
        <span>从</span>

        <div class="dateappoint">
          <van-field
            v-model="result"
            name="calendar"
            placeholder="点击选择日期"
            @click="showCalendar = true"
            style="width: 100px"
            input-align="left"
          />
        </div>

        <span>到</span>
        <div class="dateappoint">
          <van-field
            v-model="result1"
            name="calendar"
            placeholder="点击选择日期"
            @click="showCalendar1 = true"
            style="width: 100px"
          />
        </div>
        <span>共{{ betweenDays%1?'请选择':betweenDays  }}天</span>
      </div>
    </van-sticky>

    <div class="roomTypeBox">
      <div class="roomType" v-for="(item, index) in list" :key="index">
        <van-card
          :price="item.price"
          :origin-price="item.originprice"
          :desc="item.describe"
          :title="item.name"
          :thumb="item.pic"
        >
          <template #footer>
            <van-button type="primary" size="small" round>订这个</van-button>
          </template>
        </van-card>
      </div>
    </div>
  </div>

  <!-- 日历选择器 -->
  <van-calendar v-model:show="showCalendar" @confirm="onConfirm" />
  <van-calendar v-model:show="showCalendar1" @confirm="onConfirm1" />
</template>






<script setup>
import service from "@/util/service";
import { computed, onMounted, ref } from "vue";
const result = ref("");
const showCalendar = ref(false);
const day = ["日", "一", "二", "三", "四", "五", "六"];

const startdate=ref('')
const enddate=ref('1')

const onConfirm = (date) => {
  startdate.value=date.getTime()
  result.value = `${date.getMonth() + 1}/${date.getDate()} 周${
    day[date.getDay()]
  }`;
  showCalendar.value = false;
};
const result1 = ref("");
const showCalendar1 = ref(false);
const onConfirm1 = (date) => {
  enddate.value=date.getTime()
  result1.value = `${date.getMonth() + 1}/${date.getDate()} 周${
    day[date.getDay()]
  }`;
  showCalendar1.value = false;
};

const betweenDays = computed(() => {
  return (enddate.value-startdate.value)/1000/60/60/24 ;
});

const list = ref([]);
onMounted(async () => {
  const lists = await service({
    url: "/list",
  });
  list.value = lists.data;
  console.log(list.value);
});



</script>
 




<style lang="scss">
.body {
  background-color: #eee;
  height: 100%;
  .appoint {
    height: 15vh;
    background-color: #fff;
    .dateappoint {
      width: 80px;
      display: inline-block;
      margin: 10px 30px 0 0;
    }
  }
  .hotelname {
    text-align: left;
    background-color: #fff;
    position: relative;
    top: -10px;
    border-radius: 10px 10px 0 0;
    padding: 5px;
    p {
      margin: 0;
    }
    h2 {
      margin: 0;
    }
  }
  .roomTypeBox {
    background-color: #eee;
    .roomType {
      margin: 10px 20px;
      background-color: #fff;
      border-radius: 15px;
      text-align: left;
    }
  }
}
.van-card__title {
  font-size: 18px;
  line-height: 18px;
}
</style>